<template>
  <view class="container">
    <view class="header_txt">
      <view class="back"
            @click="backHandler">
        <image src="/static/img/back3.png"></image>
      </view>
      <view class="title"> 问题反馈 </view>
    </view>
    <view class="box">
      <view class="kong_box"></view>
      <view class="input_box">
        <input type="text"
               placeholder-class="placeholder"
               v-model.number='mobile'
               placeholder="请填写您的联系电话" />
      </view>
      <view class='contentbox'>
        <textarea class="text_center"
                  placeholder-class="placeholder"
                  v-model='content'
                  placeholder="请描述您遇到的问题,不少于15字" />
        <block>
          <view class='multiimgbox'
                v-show="talksaveList.length"
                v-for="(item,index) in talksaveList"
                :key="index">
            <image src='/static/image/fbht_ico_gb@2x.png'
                   class='closepng'
                   @click="delUrl(index)"></image>
            <image :src='$serverIp+item'
                   class='multiimg'></image>
          </view>
        </block>
        <view class='multiimgbox'
              @click="chooseImg"
              v-show="talksaveList.length<1">
          <image src='/static/image/fbbg_img_sctp@2x.png'
                 class='multiimg'></image>
        </view>
      </view>
      <view class="btns flexs"
            @click='entrue'>确认</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageurl: '',
      mobile: '',
      content: '',
      talksaveList: []
    }
  },
  methods: {
    async entrue() {
      if (/^1[345789]\d{9}$/.test(this.mobile)) {
        if (this.content.length < 15) {
          uni.showToast({
            title: '请描述您遇到的问题,不少于15字',
            icon: 'none',
            duration: 2000
          })
          return
        }
        const image = this.talksaveList.join(',')
        const { data } = await this.$http.post('/feedback/create', { mobile: this.mobile, content: this.content, image: image })
        console.log(data)
        if (data.code == 1) {
          uni.showToast({
            title: data.data,
            icon: 'none',
            duration: 1000
          })
          setTimeout(() => {
            uni.navigateBack({
              delta: 1
            })
          }, 2000)
        }
      } else {
        uni.showToast({
          title: '请输入正确手机号',
          icon: 'none',
          duration: 2000
        })
        // this.$api.msg('请输入正确手机号')
      }
    },
    delUrl(index) {
      this.talksaveList.splice(index, 1)
    },
    uploadImg() {
      return new Promise((resolve, reject) => {
        uni.chooseImage({
          count: 1,
          sizeType: ['original', 'compressed'],
          sourceType: ['album', 'camera'],
          success: (result) => resolve(result.tempFilePaths),
          fail: (err) => reject(err)
        })
      })
    },
    uploadimage(path) {
      // console.log(777)
      const _this = this
      return new Promise((resolve, reject) => {
        uni.uploadFile({
          url: _this.$serverIp + 'index.php/api/common/upload/', //仅为示例，非真实的接口地址
          filePath: path,
          name: 'file',
          formData: {
            token: uni.getStorageSync('userinfo').token
          },
          success: (uploadFileRes) => resolve(JSON.parse(uploadFileRes.data).data.url),
          fail: (err) => reject(err)
        })
      })
    },
    async chooseImg() {
      const tempFilePaths = await this.uploadImg()
      for (let i = 0; i < tempFilePaths.length; i++) {
        if (this.talksaveList.length < 1) {
          const res = await this.uploadimage(tempFilePaths[i])
          this.talksaveList.push(res)
        }
      }
    },
    backHandler() {
      uni.navigateBack({
        delta: 1
      })
    }
  }
}
</script>

<style lang="scss">
.multiimgbox {
  height: 162rpx;
  width: 162rpx;
  padding: 20rpx;
  /* border: 1rpx solid red; */
  position: relative;
}
.closepng {
  width: 26rpx;
  height: 26rpx;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
}

.multiimg {
  width: 122rpx;
  height: 122rpx;
}

/* 头部区域 */
.header_txt {
  width: 750rpx;
  overflow: hidden;
  height: 88rpx;
  line-height: 88rpx;
  background-color: #fff;

  .back {
    position: absolute;
    top: 14rpx;
    left: 14rpx;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 48rpx;
      height: 48rpx;
    }
  }

  .right {
    position: absolute;
    top: 14rpx;
    right: 14rpx;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .title {
    text-align: center;
    height: 88rpx;
    // margin-top: -20rpx;
    // line-height: 88rpx;
    font-size: 32rpx;
    font-weight: bold;
  }
}
.box {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
}
.kong_box {
  width: 100%;
  height: 20rpx;
  background-color: #f5f5f5;
}
.input_box {
  width: 720rpx;
  height: 80rpx;
  background: #ffffff;
  border-radius: 10rpx;
  margin: 0rpx auto 0;
}

.input_box input {
  width: 100%;
  height: 80rpx;
  padding-left: 20rpx;
}
.placeholder {
  font-size: 28rpx;
  color: #999999;
}

.contentbox {
  height: auto;
  width: 720rpx;
  background: #ffffff;
  border-radius: 10rpx;
  margin: 0rpx auto 0;
}
.text_center {
  width: 690rpx;
  height: 300rpx;
  background: #ffffff;
  border-radius: 10rpx;
  margin: 20rpx auto 0;
  padding: 20rpx 0 0 20rpx;
}
.addimg {
  width: 124rpx;
  height: 124rpx;
  /* border:1rpx solid red; */
  margin-left: 20rpx;
  margin-bottom: 20rpx;
}
.btns {
  width: 650rpx;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background: #ffdd47;
  border-radius: 10rpx;
  font-size: 30rpx;
  margin: 60rpx auto 0;
}
</style>


